<template>
  <div class="page none-sizing">
    <!-- <el-form
      :inline="true"
      v-if="searchVisible"
      class="query-form m-b-10"
      ref="searchForm"
      :model="searchForm"
      @keyup.enter="refreshList()"
      @submit.prevent
    >
      <el-form-item prop="project.id" label="项目id：">
        <GridSelect
						  title="选择项目id"
						  placeholder="请选择项目id"
						  labelName = 'projectName'
						  labelValue = 'id'
						  v-model = "searchForm.project.id"
						  :limit="1"
						  :columns="[
						  {
						    prop: 'id',
						    label: '主键'
						  },
						  {
						    prop: 'projectName',
						    label: '项目名称'
						  }
						  ]"
						  :searchs="[
						  {
						    prop: 'projectName',
						    label: '项目名称'
						  }
						  ]"
						  :api="projectMainService">
						</GridSelect>
		   </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="refreshList()" icon="search">查询</el-button>
        <el-button type="default" @click="resetSearch()" icon="refresh-right">重置</el-button>
      </el-form-item>
    </el-form> -->

		<div class="jp-table">
		  <vxe-toolbar ref="projectCompletedToolbar" :refresh="{query: refreshList}" import export print custom>
		    <template #buttons>
				<el-button v-if="hasPermission('completed:projectCompleted:add')" type="primary"  icon="plus" @click="add()">竣工证上传</el-button>
				<el-button v-if="hasPermission('completed:projectCompleted:edit')" type="warning" icon="edit-filled" @click="edit()" v-show="$refs.projectCompletedTable && $refs.projectCompletedTable.getCheckboxRecords().length === 1" plain>修改</el-button>
				<el-button v-if="hasPermission('completed:projectCompleted:del')" type="danger"   icon="del-filled" @click="del()" v-show="$refs.projectCompletedTable && $refs.projectCompletedTable.getCheckboxRecords().length > 0" plain>删除</el-button>
		    </template>
		    <template #tools>
		<vxe-button
		  type="text"
		  :title="
		    searchVisible ? '收起检索' : '展开检索'
		  "
		  icon="vxe-icon-search"
		  class="tool-btn"
		  @click="searchVisible = !searchVisible"
		></vxe-button>
		<vxe-button
		  type="text"
		  title="下载导入模板"
		  v-if="hasPermission('completed:projectCompleted:import')"
		  icon="vxe-button--icon vxe-icon-file-excel"
		  class="tool-btn m-l-0"
		  @click="downloadTpl()"
		>
		</vxe-button>
    </template>
		  </vxe-toolbar>
		  <div class="jp-table-body">
			<el-form :model="listForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''" :disabled="true" label-width="80px">
          <el-form-item label="竣工时间" prop="finishedDate" :rules="[
                 ]">
            <el-date-picker style="width: 200px;" v-model="listForm.completedDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
            <div class="attachment-list" v-if="listForm?.attachment">
              <div class="attachment-item" v-for="(item, index) in listForm.attachment.split(',')" :key="index" @click="previewFiles(item)">
                <div class="file-icon">
                 <img src="../../assets/img/file.png" alt="">
                </div>
                <div class="file-info">
                  <span class="file-name">{{ decodeURIComponent(item.substring(item.lastIndexOf("&name=")+6)) }}</span>
                  <span class="file-size">900kb</span>
                </div>
              </div>
            </div>
        </el-form>

		  <!-- <vxe-table
				border="inner"
				auto-resize
				resizable
				height="600"
				:loading="loading"
				size="small"
				ref="projectCompletedTable"
				show-header-overflow
				show-overflow
				highlight-hover-row
				:menu-config="{}"
				:print-config="{}"
  :import-config="{
    importMethod: importMethod,
    types: ['csv', 'xls', 'xlsx'],
    remote: true,
  }"
  :export-config="{
    remote: true,
    filename: `项目竣工数据${moment(new Date()).format(
		'YYYY-MM-DD'
    )}`,
    sheetName: '项目竣工数据',
    exportMethod: exportMethod,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all'],
  }"

				@sort-change="sortChangeHandle"
				:sort-config="{remote:true}"
				:data="dataList"
				:checkbox-config="{}">
				<vxe-column type="seq" width="40"></vxe-column>
				<vxe-column type="checkbox"  width="40px"></vxe-column>
		<vxe-column
		  field="project.projectName"
		  sortable
		  title="项目id">
				<template #default="{ row }">
				  <el-link  type="primary" :underline="false" v-if="hasPermission('completed:projectCompleted:edit')" @click="edit(row.id)">{{row.project && row.project.projectName}}</el-link>
				  <el-link  type="primary" :underline="false" v-else-if="hasPermission('completed:projectCompleted:view')"  @click="view(row.id)">{{row.project &&  row.project.projectName}}</el-link>
				  <span v-else>{{row.project && row.project.projectName}}</span>
				</template>
		</vxe-column>
    <vxe-column
		  field="completedDate"
		  sortable
		  title="竣工时间">
		</vxe-column>
    <vxe-column
		  field="remark"
		  sortable
		  title="备注">
		</vxe-column>
    <vxe-column
		  field="attachment"
		  sortable
		  title="附件">
		  <template #default="{ row }">
				<template v-if="row.attachment">
				    <el-link type="primary" class="m-r-10" :href="item" target="_blank" :key="index" v-for="(item, index) in row.attachment.split(',')"> {{decodeURIComponent(item.substring(item.lastIndexOf("&name=")+6))}}</el-link>
				</template>
		  </template>
		</vxe-column>
		<vxe-column
		  fixed="right"
		  align="center"
		  width="200"
		  title="操作">
		  <template   #default="{ row }">
		    <el-button v-if="hasPermission('completed:projectCompleted:view')" type="primary" text icon="view-filled" @click="view(row.id)">查看</el-button>
		    <el-button v-if="hasPermission('completed:projectCompleted:edit')" type="primary" text icon="edit-filled" @click="edit(row.id)">修改</el-button>
		    <el-button v-if="hasPermission('completed:projectCompleted:del')"  type="danger"  text icon="del-filled" @click="del(row.id)">删除</el-button>
		  </template>
		</vxe-column>
    </vxe-table>
    <vxe-pager
		background
		size="small"
		:current-page="tablePage.currentPage"
		:page-size="tablePage.pageSize"
		:total="tablePage.total"
		:page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
		:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
		@page-change="currentChangeHandle">
    </vxe-pager> -->
    </div>
    </div>
		  <!-- 弹窗, 新增 / 修改 -->
    <ProjectCompletedForm  ref="projectCompletedForm" @refreshDataList="refreshList"></ProjectCompletedForm>

	  <!-- 引入文件预览组件 -->
      <FilePreview ref="filePreview"  />
  </div>
</template>

<script>
  import ProjectCompletedForm from './ProjectCompletedForm'
  import projectCompletedService from '@/api/completed/projectCompletedService'
  import GridSelect from '@/components/gridSelect'
  import projectMainService from '@/api/project/projectMainService'  
  import FilePreview from '@/components/preview' 
  export default {
	inject: {
    projectId: {
      default: ''
    },
  },
    data () {
		return {
			listForm:{},
		  searchVisible: true,
		  searchForm: {
		    project: {
				id: ''
		    }
		  },
		  projectMainService: projectMainService,  
		  dataList: [],
		  tablePage: {
		    total: 0,
		    currentPage: 1,
		    pageSize: 10,
		    orders: [{ column: "a.create_time", asc: false }],
		  },
		  loading: false
		}
    },
    components: {
		GridSelect,
		ProjectCompletedForm,
		FilePreview
    },
    created () {
		this.searchForm.project.id = this.projectId;
		this.refreshList()

    },    
    mounted () {
		this.$nextTick(() => {
		  // 将表格和工具栏进行关联
		  const $table = this.$refs.projectCompletedTable
		  const $toolbar = this.$refs.projectCompletedToolbar
		  $table.connect($toolbar)
		})
    }, 
    activated () {
		
    },
    methods: {
		previewFiles(url) {
      this.$refs.filePreview.open(url)
    },
		// 获取数据列表
		refreshList () {
		  this.loading = true
		  projectCompletedService.list({
		    'current': this.tablePage.currentPage,
		    'size': this.tablePage.pageSize,
		    'orders': this.tablePage.orders,
		    ...this.searchForm
		  }).then((data) => {
		    this.dataList = data.records
			this.listForm= data.records&&data.records.length?data.records[0]:{}
		    this.tablePage.total = data.total
		    this.loading = false
		  })
		},
		// 当前页
		currentChangeHandle ({ currentPage, pageSize }) {
		  this.tablePage.currentPage = currentPage
		  this.tablePage.pageSize = pageSize
		  this.refreshList()
		},
		// 排序
    sortChangeHandle(obj) {
		  this.tablePage.orders = [];
		  if (obj.order != null) {
		    this.tablePage.orders = [{ column: obj.column.sortBy || this.$utils.toLine(obj.property), asc: obj.order === "asc" }];
		  } else {
		    this.tablePage.orders = [{ column: "a.create_time", asc: false }];
		  }
		  this.refreshList();
		},
		// 新增
		add () {
			if(this.dataList.length>0){
				this.edit(this.dataList[0].id)
			}else{
				this.$refs.projectCompletedForm.init('add', this.searchForm.project.id)
			}
		  
		},
		// 修改
		edit (id) {
		  id = id || this.$refs.projectCompletedTable.getCheckboxRecords().map(item => {
		    return item.id
		  })[0]
		  this.$refs.projectCompletedForm.init('edit', id)
		},
		// 查看
		view (id) {
		  this.$refs.projectCompletedForm.init('view', id)
		},
		// 删除
		del (id) {
		  let ids = id || this.$refs.projectCompletedTable.getCheckboxRecords().map(item => {
		    return item.id
		  }).join(',')
		  this.$confirm(`确定删除所选项吗?`, '提示', {
		    confirmButtonText: '确定',
		    cancelButtonText: '取消',
		    type: 'warning'
		  }).then(() => {
		    this.loading = true
		    projectCompletedService.delete(ids).then((data) => {
				this.$message.success(data)
				this.refreshList()
				this.loading = false
		    })
		  })
		},
		// 下载模板
		downloadTpl() {
		this.loading = true
		projectCompletedService
		  .exportTemplate()
		  .then((data) => {
		    // 将二进制流文件写入excel表，以下为重要步骤
		    this.$utils.downloadExcel(data, "项目竣工导入模板");
		    this.loading = false
		  })
		  .catch(function (err) {
				this.loading = false
		    if (err.response) {
				console.log(err.response);
		    }
		  });
    },
    // 自定义服务端导入
    importMethod({ file }) {
		// 处理表单
		const formBody = new FormData();
		formBody.append("file", file);
		this.loading = true
		projectCompletedService.importExcel(formBody).then((result) => {
		  this.$message.success({
		    dangerouslyUseHTMLString: true,
		    message: result,
		  });
		  this.refreshList();
		});
    },
    // 自定义服务端导出
    exportMethod({ options }) {
		// 传给服务端的参数
		const params = {
		  current: this.tablePage.currentPage,
		  size: this.tablePage.pageSize,
		  orders: this.tablePage.orders,
		  ...this.searchForm,
		  filename: options.filename,
		  sheetName: options.sheetName,
		  isHeader: options.isHeader,
		  original: options.original,
		  mode: options.mode,
		  selectIds:
		    options.mode === "selected"
				? options.data.map((item) => item.id)
				: [],
		  exportFields: options.columns.map(
		    (column) => column.property && column.property.split(".")[0]
		  ),
		};
		this.loading = true;
		return projectCompletedService
		  .exportExcel(params)
		  .then((data) => {
		    // 将二进制流文件写入excel表，以下为重要步骤
		    this.$utils.downloadExcel(data, options.filename);
		    this.loading = false;
		  })
		  .catch(function (err) {
		    if (err.response) {
				console.log(err.response);
		    }
		  });
    },
		resetSearch () {
		  this.$refs.searchForm.resetFields()
		  this.refreshList()
		}
    }
  }
</script>

<style lang="scss" scoped>
.attachment-list {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  .attachment-item {
    width: 30%;
    display: flex;
 
    
    align-items: center;
    background: #f5f7fa;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    
    .file-icon {
      width: 40px;
      height: 40px;
      background: #A8ACAF;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      margin-right: 10px;
      
      img {
        width: 40px;
        color: #909399;
      }
    }
    
    .file-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      
      .file-name {
        color: #303133;
        font-size: 14px;
        margin-bottom: 4px;
      }
      
      .file-size {
        color: #909399;
        font-size: 12px;
      }
    }
  }
}
</style>